<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css" />
	</head>
	<body>
		<div class="body">
			<div class="shop"><i></i><span>我的购物车</span></div>
			<div class="product">
				<div class="product-box">
					<div class="product-ckb"><em class="product-em product-xz"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a3.png" class="product-img" />
							<span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a1.png" class="product-img" />
							<span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">2099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a2.png" class="product-img" />
							<span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a4.png" class="product-img" />
							<span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
			</div>
			<div class="product-js">
				<div class="product-al">
					<div class="product-all">
						<em class=""></em>
					</div>
					<div class="all-xz"><span class="product-all-qx">全选</span>
						<div class="all-sl" style="display: none;">(<span class="product-all-sl">0</span>)</div>
					</div>
				</div>
				<a href="#" class="product-sett product-sett-a">结算</a>
				<div class="all-product"><span class="all-product-a">¥&thinsp;<span class="all-price">296</span></span></div>

			</div>
		</div>
		<!--购物车空-->
		<div class="kon-cat">
			<div class="catkon">
				<div class="kon-box">
					<div class="kon-hz">
						<img src="img/cart-air.png" />
						<span class="kon-wz">购物车什么都没有</span>
						<a href="###" class="kon-lj">去逛逛</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
$(function() {
	//179000845江沿蒙
		geta();
		//数量加
		$(".product-add").click(function() {
			var num = $(this).siblings(".product-num").val();
			console.log($(this).siblings(".product-num").html());
			num++;
			$(this).siblings(".product-num").val(num);
			gettotal();
			geta();
		});
		//数量减
		$(".product-jian").click(function(){
			var num = $(this).siblings(".product-num").val();
			num--;
			if(num >= 1){
				$(this).siblings(".product-num").val(num);
				gettotal();
				geta();
			}
		});
		//商品删除
		$(".product-del>img").click(function(){
			if(confirm('确定要删除吗？')){
				$(this).parents(".product-box").remove();
				gettotal();
				geta();
			}
			if($(".product").find(".product-box").length == 0){
				$(".kon-cat").css({
					"display":"block"
				});
			}
		});
		//商品选中
		$(".product-em").on("click",function(){
			$(this).toggleClass("product-xz");
			var a = $(".product-box").find(".product-em");
			var b = $(".product-box").find(".product-xz");
			if(b.length !=  0){
				gettotal();
				geta();
				$(".product-all-qx").text("已选("+b.length+")");
			}else{
				gettotal();
				geta();
				$(".product-all-qx").text("全选");
			}
			if(a.length == b.length){
				$(".product-all>em").addClass("product-all-on");
				gettotal();
				geta();
			} else {
				$(".product-all>em").removeClass("product-all-on");
				gettotal();
				geta();
			}	
		});
		//商品全选
		$(".product-all>em").on("click", function() {
			$(this).toggleClass("product-all-on");
			if($(this).hasClass("product-all-on")){
				$(".product-em").addClass("product-xz");
				$(".product-all-qx").text("已选4");
				gettotal();
				geta();
			} else {
				$(".product-em").removeClass("product-xz");
				$(".product-all-qx").text("全选");
				gettotal();
				geta();
			}
			});
		
		// 计算价格
		function gettotal() {
			var allprice=0;
			 $(".product-box").each(function() { //循环每个店铺	
					if ($(this).find(".product-xz").length != 0) { //如果该商品被选中		
					  var num = $(this).find(".product-num").val(); //得到商品的数量
					  var price = $(this).find(".price").text(); //得到商品的单价
					  var total = price * num; //计算单个商品的总价
					  allprice += total; //计算该店铺的总价
					}
				});
				$(".all-price").text(allprice); //输出全部总价
			  }
		//未选取不结算
		function geta() {
			if($(".product-box").find(".product-xz").length > 0){
				$(".product-js>a").removeClass("product-sett-a");
			} else {
				$(".product-js>a").addClass("product-sett-a");
			}
		}
		});

		</script>
</html>
